<template>
  <div style="padding: 0 15px;">
    <div class="companysmary">
      <div class="logosub">
        <div class="logo">
          <img :src="info.logo">
        </div>
        <div class="cname">
          <h2>{{info.name}}</h2>
          <div class="mss">
            <span>{{info.industry}}</span>
            <span>{{info.enterpriseNature}}</span>
            <span>{{info.companySize}}</span>
          </div>
          <div v-if="info.treatment" class="clear">
            <el-tag type="warning"
              v-for="(item, index) in info.treatment.split(',')" 
              :key="index">{{item}}
            </el-tag>
          </div>
        </div>
      </div>
      <div class="companyjianjie">
        <div class="nrr" :style="{height: lookmore ? 'auto': '70px'}">
          {{info.introduction}}
        </div>
        <div class="companyjianjieBom">
          <el-divider>
            <div style="display: inline-block" @click="moresee">{{lookmore ? '收起': '查看更多'}}<i
              :class="lookmore ?  'el-icon-caret-top': 'el-icon-caret-bottom'"></i></div>
          </el-divider>
        </div>
      </div>
    </div>
    <div class="indextitle clear">
      <div class="leftT zw">该企业所有职位</div>
      <div class="rightT"></div>
    </div>
    <el-carousel v-if="zhiweiList.length > search.pageSize" :height="listHeight + 'px'" :interval="1000*30" arrow="never">
        <el-carousel-item v-for="item in zhiweiList" :key="item">
          <div class="companytablists clear" v-for="(item, index) in zhiweiList" :key="index" @click="tojob(item.id)">
            <span class="zwname">{{item.positionName}}</span>
            <span class="jieshao">
              <b>{{item.wageRange}}</b>
              <span v-if="item.workYears">{{item.workYears}}年经验</span>
              <span v-if="item.educational">{{item.educational}}</span>
              <span>招{{item.zprs}}人</span>
            </span>
            <span class="riqi">发布于 {{item.updateTime}}</span>
          </div>
        </el-carousel-item>
      </el-carousel>
    <div v-if="zhiweiList.length <= search.pageSize" :style="`height:${listHeight}px`">
      <div class="companytablists clear" v-for="(item, index) in zhiweiList" :key="index" @click="tojob(item.id)">
        <span class="zwname">{{item.positionName}}</span>
        <span class="jieshao">
          <b>{{item.wageRange}}</b>
          <span v-if="item.workYears">{{item.workYears}}年经验</span>
          <span v-if="item.educational">{{item.educational}}</span>
          <span>招{{item.zprs}}人</span>
        </span>
        <span class="riqi">发布于 {{item.updateTime}}</span>
      </div>
    </div>
    <RightMenu />
    <Footer/>
  </div>
</template>
<script type="text/babel">
import Footer from './components/Footer'
import RightMenu from './components/RightMenu'
import sc from '../../assets/img/sc.png'
import zw from '../../assets/img/zw.png'
import {
  PositionByEnterpriseId,
  GetUrlParam,
  EnterpriseInfo,
  EnterpriseLibByUid,
  addCollectionEnterprise
} from '../../assets/js/domains'

export default {
  name: 'CompanyDetail',
  components: {
    Footer,
    RightMenu
  },
  directives: {},
  data() {
    return {
      lookmore: false,
      zhiweiList: [],
      info: {},
      cacheCompanyInfo:{},
      search: {
        enterprise_uid: '',
        pageNum: 1,
        pageSize: 4
      },
      listHeight: 0,
      sc: sc,
      zw: zw,
      total: 0
    }
  },
  created() {
    document.title = '企业详情'
    this.listHeight = document.body.clientHeight - 396;
    this.cacheCompanyInfo = JSON.parse(localStorage.getItem('facer_companyInfo'))
  },
  computed:{},
  mounted() {
    this.search.enterprise_uid = this.cacheCompanyInfo.enterpriseUid
    this.getEnterpriseLibByUid()
    this.getPositionByEnterpriseId()
  },
  methods: {
    moresee() {
      this.lookmore = !this.lookmore
    },
    getEnterpriseLibByUid() {
      const _this = this
      EnterpriseLibByUid({ 
        enterprise_uid: this.cacheCompanyInfo.enterpriseUid, 
        userUid: this.cacheCompanyInfo.id 
      }).then(res => {
        if (res.code === 200) {
          _this.info = res.data
        } else {
          _this.$alert(res.msg, '提示')
        }
      })
    },
    getPositionByEnterpriseId(page) {
      const _this = this
      page && (this.search.pageNum = page)
      PositionByEnterpriseId(this.search).then(function (res) {
        if (res.code === 200) {
          _this.zhiweiList = res.data.content || []
          _this.total = res.data.totalElements
        } else {
          _this.$alert(res.msg, '提示')
        }
      })
    },
    tojob(id) {
      this.$router.push({path:'/positionDetail', query: {id}})
    },
  }
}
</script>
<style lang="less" scoped>
.companysmary {
  background: #fff;
  padding: 20px;

  .logosub {
    position: relative;
    padding-left: 150px;
    .logo {
      position: absolute;
      left: 20px;
      width: 120px;
      height: 120px;
      border: 1px solid #dcdcdc;
      img { width: 100%; height: 100%;}
    }

    .cname {
      margin-left: 20px;
      h2 {
        margin: 10px 0;
        font-size: 28px;
        text-align: left;
        color: #1e1e1e;
        line-height: 37px;
      }

      .mss {
        span {
          font-size: 16px;
          display: inline-block;
          color: #8d8e9c;
          position: relative;
          line-height: 22px;
          padding: 10px;

          &:first-child {
            padding-left: 0px;
          }

          &:before {
            position: absolute;
            content: '';
            right: 0;
            top: 13px;
            width: 1px;
            height: 18px;
            border-right: 1px solid #dcdee0;
          }

          &:last-child:before {
            border-right: 0;
          }
        }

      }
      .el-tag+.el-tag{margin-left: 10px;}
    }

    .soucang {
      float: right;
      width: 120px;
      height: 50px;
      background: #ffffff;
      border: 1px solid #dcdee0;
      border-radius: 6px;
      text-align: center;
      line-height: 50px;
      margin-top: 30px;
      margin-right: 20px;

      .tnm {
        display: inline-block;
        background: url("../../assets/img/sc.png") left center no-repeat;
        padding-left: 30px;
        background-size: 17px auto;
        line-height: 50px;
      }
    }

  }

  .companyjianjie {
    padding-top: 15px;
    font-size: 18px;
    color: #505050;
    line-height: 40px;
    position: relative;
    .nrr {
      height: 120px;
      padding-bottom: 30px;
      overflow: hidden;
    }

    .companyjianjieBom {
      position: absolute;
      bottom: -17px;
      left: 0;
      right: 0;
      z-index: 1;
      background: #fff;
    }
  }

}

.indextitle {
  padding: 30px 0 20px;

  .leftT {
    font-size: 22px;
    text-align: left;
    color: #1e1e1e;
    line-height: 30px;
    font-weight: 700;
    &.zw {
      background: url("../../assets/img/zw.png") left center no-repeat;
      background-size: auto 30px;
      padding-left: 40px;
    }
  }

  .rightT {
    float: right;
    margin-top: 4px;

    a {
      font-size: 18px;
      font-weight: 500;
      text-align: right;
      color: #8d8e9c;
      letter-spacing: 1px;

      &:hover {
        text-decoration: underline;
        color: #12cde5;
      }
    }
  }
}

.companytablists {
  background: #fff;
  padding: 15px 150px 15px 15px;
  margin-bottom: 15px;
  cursor: pointer;

  .zwname {
    height: 32px;
    font-size: 24px;
    font-weight: bold;
    text-align: left;
    color: #20a2b2;
    line-height: 32px;
    padding-left: 20px;
  }

  .jieshao {
    margin-left: 50px;

    b {
      font-size: 18px;
      font-family: Bebas;
      text-align: left;
      color: #f23f00;
    }

    span {
      height: 22px;
      font-size: 16px;
      display: inline-block;
      color: #8d8e9c;
      position: relative;
      line-height: 22px;
      padding: 10px;

      &:first-child {
        padding-left: 0px;
      }

      &:before {
        position: absolute;
        content: '';
        right: 0;
        top: 13px;
        width: 1px;
        height: 18px;
        border-right: 1px solid #dcdee0;
      }

      &:last-child:before {
        border-right: 0;
      }
    }
  }

  .riqi {
    float: right;
    height: 40px;
    font-size: 18px;
    color: #8d8e9c;
    line-height: 40px;
  }
}



</style>


